<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import TrendChart from './detail/TrendChart.vue'
import ChassisComponentsPrediction from './detail/ChassisComponentsPrediction.vue'
import WeaponSystemPrediction from './detail/WeaponSystemPrediction.vue'
import AskExpertButton from './detail/AskExpertButton.vue'

const route = useRoute()

// 模拟设备列表数据
const devices = ref([
  { id: 'VH001', name: '主战车辆一号' },
  { id: 'VH002', name: '主战车辆二号' },
  { id: 'VH003', name: '装甲运兵车A' },
  { id: 'VH004', name: '自行火炮B' },
  { id: 'VH005', name: '侦察车C' }
])

// 当前选中的设备
const selectedDevice = ref(devices.value[0])

// 模拟趋势数据
const trendData = ref([
  { date: '2025-08-01', value: 92 },
  { date: '2025-08-05', value: 88 },
  { date: '2025-08-10', value: 85 },
  { date: '2025-08-15', value: 82 },
  { date: '2025-08-20', value: 80 },
  { date: '2025-08-25', value: 78 },
  { date: '2025-08-30', value: 75 }
])

// 模拟底盘部件数据
const chassisData = ref({
  engine: {
    name: '主发动机',
    rul: 320,
    status: '良好',
    prediction: '预计还可使用300-350小时'
  },
  transmission: {
    name: '传动系统',
    rul: 280,
    status: '良好',
    prediction: '建议在300小时后进行检查'
  },
  suspension: {
    name: '悬挂系统',
    rul: 180,
    status: '注意',
    prediction: '建议在下次任务前进行维护'
  },
  brake: {
    name: '制动系统',
    rul: 90,
    status: '警告',
    prediction: '需要尽快进行维护'
  }
})

// 模拟武器系统数据
const weaponData = ref({
  mainGun: {
    name: '主炮系统',
    remainingShots: 120,
    totalShots: 200,
    status: '良好',
    prediction: '预计还可发射80-100次'
  },
  auxiliaryGun: {
    name: '副炮系统',
    remainingShots: 80,
    totalShots: 100,
    status: '注意',
    prediction: '建议在下次任务前检查'
  },
  missile: {
    name: '导弹系统',
    remainingHours: 40,
    totalHours: 50,
    status: '警告',
    prediction: '需要尽快进行维护'
  }
})

// 不同设备的数据（模拟）
const deviceData = ref({
  'VH001': {
    chassis: {
      engine: {
        name: '主发动机',
        rul: 320,
        status: '良好',
        prediction: '预计还可使用300-350小时'
      },
      transmission: {
        name: '传动系统',
        rul: 280,
        status: '良好',
        prediction: '建议在300小时后进行检查'
      },
      suspension: {
        name: '悬挂系统',
        rul: 180,
        status: '注意',
        prediction: '建议在下次任务前进行维护'
      },
      brake: {
        name: '制动系统',
        rul: 90,
        status: '警告',
        prediction: '需要尽快进行维护'
      }
    },
    weapon: {
      mainGun: {
        name: '主炮系统',
        remainingShots: 120,
        totalShots: 200,
        status: '良好',
        prediction: '预计还可发射80-100次'
      },
      auxiliaryGun: {
        name: '副炮系统',
        remainingShots: 80,
        totalShots: 100,
        status: '注意',
        prediction: '建议在下次任务前检查'
      },
      missile: {
        name: '导弹系统',
        remainingHours: 40,
        totalHours: 50,
        status: '警告',
        prediction: '需要尽快进行维护'
      }
    },
    trend: [
      { date: '2025-08-01', value: 92 },
      { date: '2025-08-05', value: 88 },
      { date: '2025-08-10', value: 85 },
      { date: '2025-08-15', value: 82 },
      { date: '2025-08-20', value: 80 },
      { date: '2025-08-25', value: 78 },
      { date: '2025-08-30', value: 75 }
    ]
  },
  'VH002': {
    chassis: {
      engine: {
        name: '主发动机',
        rul: 280,
        status: '良好',
        prediction: '预计还可使用250-300小时'
      },
      transmission: {
        name: '传动系统',
        rul: 220,
        status: '注意',
        prediction: '建议在250小时后进行检查'
      },
      suspension: {
        name: '悬挂系统',
        rul: 150,
        status: '良好',
        prediction: '建议在下次任务前进行维护'
      },
      brake: {
        name: '制动系统',
        rul: 110,
        status: '注意',
        prediction: '需要尽快进行维护'
      }
    },
    weapon: {
      mainGun: {
        name: '主炮系统',
        remainingShots: 90,
        totalShots: 200,
        status: '注意',
        prediction: '预计还可发射70-90次'
      },
      auxiliaryGun: {
        name: '副炮系统',
        remainingShots: 60,
        totalShots: 100,
        status: '警告',
        prediction: '建议在下次任务前检查'
      },
      missile: {
        name: '导弹系统',
        remainingHours: 30,
        totalHours: 50,
        status: '警告',
        prediction: '需要尽快进行维护'
      }
    },
    trend: [
      { date: '2025-08-01', value: 85 },
      { date: '2025-08-05', value: 82 },
      { date: '2025-08-10', value: 80 },
      { date: '2025-08-15', value: 78 },
      { date: '2025-08-20', value: 75 },
      { date: '2025-08-25', value: 72 },
      { date: '2025-08-30', value: 70 }
    ]
  }
})

// 监听设备选择变化
watch(selectedDevice, (newDevice) => {
  // 更新数据
  if (deviceData.value[newDevice.id]) {
    chassisData.value = deviceData.value[newDevice.id].chassis
    weaponData.value = deviceData.value[newDevice.id].weapon
    trendData.value = deviceData.value[newDevice.id].trend
  } else {
    // 如果没有特定数据，使用默认数据
    chassisData.value = {
      engine: {
        name: '主发动机',
        rul: 300,
        status: '良好',
        prediction: '预计还可使用280-320小时'
      },
      transmission: {
        name: '传动系统',
        rul: 250,
        status: '良好',
        prediction: '建议在280小时后进行检查'
      },
      suspension: {
        name: '悬挂系统',
        rul: 160,
        status: '注意',
        prediction: '建议在下次任务前进行维护'
      },
      brake: {
        name: '制动系统',
        rul: 100,
        status: '注意',
        prediction: '需要尽快进行维护'
      }
    }
    weaponData.value = {
      mainGun: {
        name: '主炮系统',
        remainingShots: 100,
        totalShots: 200,
        status: '注意',
        prediction: '预计还可发射80-100次'
      },
      auxiliaryGun: {
        name: '副炮系统',
        remainingShots: 70,
        totalShots: 100,
        status: '注意',
        prediction: '建议在下次任务前检查'
      },
      missile: {
        name: '导弹系统',
        remainingHours: 35,
        totalHours: 50,
        status: '警告',
        prediction: '需要尽快进行维护'
      }
    }
    trendData.value = [
      { date: '2025-08-01', value: 88 },
      { date: '2025-08-05', value: 85 },
      { date: '2025-08-10', value: 82 },
      { date: '2025-08-15', value: 80 },
      { date: '2025-08-20', value: 78 },
      { date: '2025-08-25', value: 75 },
      { date: '2025-08-30', value: 72 }
    ]
  }
})

onMounted(() => {
  // 模拟从路由参数或API获取数据
  if (route.query.vehicleId) {
    const device = devices.value.find(d => d.id === route.query.vehicleId)
    if (device) {
      selectedDevice.value = device
    }
  }
})

const handleAskExpert = () => {
  alert(`联系专家功能已触发，当前设备：${selectedDevice.value.name}`)
}
</script>

<template>
  <div class="health-detail-page">
    <div class="page-header">
      <h1><i class="el-icon-monitor"></i> 车辆健康详情</h1>
      <div class="header-controls">
        <div class="device-selector">
          <span>选择设备：</span>
          <el-select 
            v-model="selectedDevice" 
            placeholder="请选择设备" 
            value-key="id"
            style="width: 20vw;"
          >
            <el-option
              v-for="device in devices"
              :key="device.id"
              :label="`${device.name} (${device.id})`"
              :value="device"
            />
          </el-select>
        </div>
        <AskExpertButton @askExpert="handleAskExpert" />
      </div>
    </div>

    <div class="content-grid">
      <div class="top-section">
        <div class="chassis-section">
          <ChassisComponentsPrediction :data="chassisData" />
        </div>
        
        <div class="weapon-section">
          <WeaponSystemPrediction :data="weaponData" />
        </div>
      </div>
      
      <div class="trend-section">
        <TrendChart :data="trendData" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.health-detail-page {
  padding: 1vw;
  background: #0f1c3c;
  min-height: 100vh;
  color: #e4e8f0;
}

.page-header {
  margin-bottom: 2vw;
  padding: 1vw;
  background: linear-gradient(135deg, #1a2a52, #152245);
  border-radius: 1vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1vw;
  box-shadow: 0 0.6vw 1.6vw rgba(0, 0, 0, 0.3);
  border: 0.1vw solid #2a3a6a;
}

.page-header h1 {
  font-size: 1.5vw;
  color: #e4e8f0;
  display: flex;
  align-items: center;
  gap: 1vw;
  margin: 0;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.device-selector {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 1vw;
}

.device-selector span {
  white-space: nowrap;
}

.content-grid {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.5vw;
  height: calc(100vh - 12vw);
}

.top-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5vw;
}

.trend-section {
  grid-row: 2;
}

@media (max-width: 768px) {
  .content-grid {
    grid-template-rows: auto auto auto;
    height: auto;
  }
  
  .top-section {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .header-controls {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1vw;
  }
  
  .device-selector {
    width: 100%;
  }
  
  .device-selector span {
    margin-bottom: 0.5vw;
  }
  
  .page-header h1 {
    font-size: 1.2vw;
  }
}
</style>